<template>
    <view class="logs-content-box">
        <template v-if="logs.length">
            <view class="chart-container">
                <qiun-data-charts type="ring" :chart-data="chartData" :opts="opts"
                                  class="ring-chart-canvas"></qiun-data-charts>
                <view class="poster" @click="goPoster"></view>
            </view>
            <scroll-view class="item-container" scroll-y="true">
                <view class="log-item" v-for="(item,index) in logs" :key="index">
                    <text class="log-start">{{ item.startTimeShow }}</text>
                    <text class="log-action">{{ item.action }} {{ item.action === '开始' ? '▷' : '◉' }}</text>
                    <text :class="{'log-name-rest':item.name === '休息' , 'log-name-work':item.name === '工作'}"></text>
                </view>
            </scroll-view>
            <view class="clear">
                <image class="delete-img" @click="switchModal" src="@/static/images/delete.png"></image>
            </view>
            <uni-popup ref="popup" type="dialog">
                <uni-popup-dialog type="info" title="通知" content="清除所有记录" @confirm="dialogConfirm"></uni-popup-dialog>
            </uni-popup>
        </template>
        <template v-else>
            <view class="noData">
                <image class="noData-image" src="@/static/images/nodata.png"></image>
                <text class="noData-text">暂无专注记录</text>
            </view>
        </template>
        <uni-popup ref="messagePopup" type="message">
            <uni-popup-message type="success" message="已清空"></uni-popup-message>
        </uni-popup>
    </view>
</template>

<script>
import QiunDataCharts from "@/components/qiun-data-charts/qiun-data-charts";
import {uniPopup,uniPopupMessage,uniPopupDialog} from '@dcloudio/uni-ui';

export default {
    name: "logs",
    components: {QiunDataCharts,uniPopup,uniPopupMessage,uniPopupDialog},
    data() {
        return {
            logs: [],
            logNum:0,
            workNum:0,
            restNum:0,
            opts: {},
            chartData: {}
        }
    },
    onShow() {
        this.getLogs();
        let windowWidth = 320;
        try {
            const res = uni.getWindowInfo();
            windowWidth = res.windowWidth;
        } catch (e) {
            console.error('getSystemInfoSync failed!');
        }
        const logNum = this.logNum;
        this.opts = {
            height: 10,
            width: windowWidth * 0.6,
            dataLabel:false,
            legend: {
                show: false,
            },
            title: {
                name: logNum / 2,
                fontSize: 25,
                color: '#7cb5ec'
            },
            subtitle: {
                name: '专注次数',
                color: '#666666',
                fontSize: 12
            },
            extra: {
                ring:{
                    activeOpacity: 0.5,
                    activeRadius: 10,
                    labelWidth: 15,
                    border: false,
                    borderWidth: 3,
                    borderColor: "#FFFFFF"
                },
            }
        }
        const workNum = this.workNum;
        const restNum = this.restNum;
        this.chartData = {
            series: [
                {
                    data:[
                        {
                            name:"work",
                            value:workNum / 2,
                        },
                        {
                            name:"rest",
                            value: restNum / 2,
                        }
                    ]
                }

            ]
        };
    },
    onShareAppMessage: function (res) {
        if (res.from === 'button') {
            return {
                title: '管理时间，保持专注！让自律成为习惯！',
                path: '/pages/index/index',
                imageUrl: '/image/share.jpg'
            }
        }
    },
    methods: {
        goPoster() {
            uni.navigateTo({
                url:`/pages/poster/poster?logNum=${this.logNum}`
            })
        },
        switchModal() {
            this.$refs.popup.open();
        },
        dialogConfirm() {
            this.logs= [];
            uni.setStorageSync('logs',[]);
            this.$refs.popup.close();
            this.$refs.messagePopup.open();
        },
        getLogs() {
            const logs = uni.getStorageSync('logs') || [];
            this.logNum = 0;
            this.workNum = 0;
            this.restNum = 0;
            logs.forEach(item => {
                item.startTime = new Date(item.startTime).toLocaleString();
                this.logNum++;
                if (item.type === 'work') {
                    this.workNum++;
                } else if (item.type === 'rest') {
                    this.restNum++;
                }
            });
            this.logs = logs;
        }
    }
}
</script>

<style scoped>
@import "logs.css";
</style>